iT邦幫忙

2022 iThome 鐵人賽

DAY 29
0
自我挑戰組

網頁前端設計系列 第 29

Day29-發佈自己的前端網頁!

  • 分享至 

  • xImage
  •  

自己的網頁寫完以後,只能在自己的電腦裡執行,只有自己能看到而已。

如果想要讓大家都看的到你寫的網頁,那勢必一定要將網頁發佈出去,變成一個具有專屬網址可以尋找或連結到你的網站。

許多專業的網站發佈可能都需要花錢買:

  • 主機(hosting):跟主機租借商的網路伺服器租一個放置檔案的空間。再把你設計的網頁檔案放到這個空間中,想要連結到網頁的人就能透過網頁伺服器連結到你的網站。
  • 網域名稱(domain name):可以透過這個獨特的網址來尋找你的網站,需要向網域名稱註冊商租借網域名稱。例如向某公司平台註冊。

另外還可以使用線上工具來發佈網站:

  • GitHub:是一個可以交流程式的平台,提供一個空間來存放程式碼,這個空間是基於Git的版本控制系統,能夠透過系統共同編輯平台上的程式專案,而且是開放資源,全世界的人都可以找到你的GitHub程式碼,包括使用它、從中學習並將它改得更好。而GitHub提供一個非常實用的工具"GitHub Pages",可以讓你發佈網站。
  • Google App Engine:是一個強大的平台,它能讓你在Google的基礎下建置和運行應用程式。

今天我會實際操作,把網頁發佈到我覺得最簡單好用的GitHub上

  • 首先進到GitHub的右上角,選擇"New Repository"
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992sU80l0466j.jpg

  • 輸入名稱
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992jZB317AUM4.png

  • 然後按"Create repository"
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992aourRyG67S.png

  • 點選"uploading an existing file"
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992XxQMWri4qK.png
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992BZFhIJ00ip.png

  • 可以直接選擇已寫好的檔案
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992IoAsUoBT8U.png

  • 就可以commit上傳囉
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992mduhmVpY0W.png

  • 而這只是把程式碼放上去而已,想要發佈具有網址的網頁,按"Settings"
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992srnY6ITg0J.png

  • 到"GitHub Pages"
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992lV8GzQhmUv.png

  • "Branch"選"main"
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992O0Yc5aRojs.png

  • 再儲存起來
    https://ithelp.ithome.com.tw/upload/images/20220929/20151992Dq6atioAF7.png

  • 最後請記得把網站的首頁命名成index.html
    因為用網址存取網頁時,GitHub預設是讀取index.html這個檔案當作要載入的頁面


就完成啦~
而網站上線需要一些時間
我也修改了一些背景布局

明天!

(๑•̀ㅂ•́)و✧

我們來看彩虹!

ヽ(✿゚▽゚)ノ


上一篇
Day28-開始設計一個自己的網站-首頁
下一篇
Day30-實作成品美美網站-鐵人鍊成!
系列文
網頁前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言